import React, { FC } from 'react'
import { Button, Result } from 'antd'
import styles from './style/NotFound.module.scss'
import { useNavigate } from 'react-router-dom'
import { MANAGE_INDEX_PATHNAME } from '../router'

// 事实上，在函数组件外部调用 useNavigate() 是不可行的，因为 useNavigate() 是 React Router 提供的一个 Hook，它只能在函数组件内部使用。
// React 的 Hooks 遵循了特定的规则和限制，其中包括只能在函数组件的顶层使用 Hook，而不能在嵌套函数或组件之外使用（这也是为什么不能在组件外部调用 useNavigate()）。

const NotFound: FC = () => {
  // 只能在函数内部调用hook
  const nav = useNavigate()
  return (
    <div className={styles.container}>
      <Result
        status="404"
        title="404"
        subTitle="很抱歉,您所访问的网页不存在!"
        extra={
          <Button type="primary" onClick={() => nav(MANAGE_INDEX_PATHNAME)}>
            返回首页
          </Button>
        }
      />
    </div>
  )
}

export default NotFound
